<template>
  <el-drawer v-model="addDrawer" size="48%" :show-close="false" @opened="openDrawer"
    @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{typeName}}</span></h2>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="160px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省">
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县">
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="id">
              <el-input v-model="form.id" placeholder="请输入编号" clearable maxlength="17"></el-input>
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="野外编号（图切不填）" prop="fieldId" style="width: 100%">
            <el-input v-model="form.fieldId" placeholder="请输入野外编号（图切不填）" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="剖面线名称" prop="name" style="width: 100%">
            <el-input v-model="form.name" placeholder="请输入剖面线名称" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              show-word-limit maxlength="50" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="剖面线类型" prop="profileType">
            <dict-select code="ProfileLineTypeCVD" :value="form.profileType" @update="updateDict('profileType', $event)"></dict-select>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="剖面观测目的" prop="purpose" style="width: 100%">
            <el-input v-model="form.purpose" placeholder="请输入剖面观测目的" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea"
              show-word-limit maxlength="255" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="所属成果图比例尺（分母）" prop="scale">
            <el-input v-model.number="form.scale" placeholder="请输入所属成果图比例尺（分母）" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="剖面图文件编号" prop="geoProfileAiid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.geoProfileAiid" placeholder="请输入剖面图文件编号" clearable maxlength="20"></el-input>
              <ImageUpload v-model="form.geoProfileAiidName" @uploadImage="uploadSuccess('geoProfileAiid', $event)" @delFile="deleteFile('geoProfileAiid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="剖面图原始文件编号" prop="geoProfileArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.geoProfileArwid" placeholder="请输入剖面图原始文件编号" clearable maxlength="20"></el-input>
            </el-space>
          </el-form-item>
          <el-form-item label="剖面图原始文件编号" prop="geoProfileArwidId" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <FileUpload v-model="form.geoProfileArwidName" @uploadFile="uploadSuccess('geoProfileArwid', $event)" @delFile="deleteFile('geoProfileArwid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useSpatialData from '@/hooks/useSpatialData'
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, updateDict, isShowSave } = useSpatialData()
const formRules = {
  id: [{ required: true, message: '请填写编号！', trigger: 'blur' }],
  scale: [{ required: true, message: '请填写所属成果图比例尺（分母）！', trigger: 'blur' }],
  geoProfileArwid: [{ required: true, message: '请填写剖面图原始文件编号！', trigger: 'blur' }],
  geoProfileArwidId: [{ required: true, message: '请上传剖面图原始文件编号附件！', trigger: 'blur' }]
}
</script>
<style scoped></style>